<template>
	<view class='flex align-center self-center home_fd3_0' @tap.stop="goDetails">
		<view class='flex flex-wrap align-center home_fd3_0_c0'>
			<u-lazy-load :image="item.thumb" border-radius="16" height="200" img-mode="aspectFill"></u-lazy-load>
		</view>
		<view class='flex flex-wrap align-center' :style="{'width':`calc(100%-260rpx)`}">
			<view class='flex flex-wrap align-center'>
				<text class='home_fd3_0_c1_c0_c0'>{{item.title}}</text>
				<view class='flex flex-wrap align-center'>
					<text class='home_fd3_0_c1_c0_c1_c0'>{{item.synopsis}}</text>
				</view>
				<view class='flex flex-wrap align-center justify-between home_fd3_0_c1_c0_c2'>
					<view class='flex flex-wrap align-center'>
						<template v-if="item.is_buy == 0">
							<text class='home_fd3_0_c1_c0_c2_c0_c0'>￥</text>
							<text class=' home_fd3_0_c1_c0_c2_c0_c1'>
								<text class=' home_price1_fd3_0_c1_c0_c2_c0_c1'>{{ item.price | frontPrice }}</text>
								<text class=' home_price1_fd3_0_c1_c0_c2_c0_c1'>{{ item.price | laterPrice }}</text>
							</text>
						</template>
					</view>
					<view class='flex flex-wrap align-center justify-center home_fd3_0_c1_c0_c2_c1' v-if="item.is_buy == 0" @tap.stop="goBuy">
						<text class='home_fd3_0_c1_c0_c2_c1_c0'>立即购买</text>
					</view>
					<view class='flex flex-wrap align-center justify-center home_fd3_0_c1_c0_c2_c1' v-else>
						<text class='home_fd3_0_c1_c0_c2_c1_c0'>查看详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				
			}
		},
		created() {
			
		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url: '/pages/sy/courseDetails/courseDetails?aid=' + this.item.aid
				})
			},
			goBuy() {
				uni.navigateTo({
					url: '/pages/sy/confirmOrder/confirmOrder?aid=' + this.item.aid
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-lazy-item {
		width: 260rpx !important;
		height: 200rpx !important;
	}
	.home_fd3_0_c1_c0_c2_c1_c0 {
		font-size: 28rpx;
	}
	
	.home_fd3_0_c1_c0_c2_c1 {
		background: var(--benbenbgColor0);
		background-size: 100% auto;
		color: var(--benbenFontColor3);
		width: 176rpx;
		height: 60rpx;
		border-radius: 12rpx;
	}
	
	.home_price1_fd3_0_c1_c0_c2_c0_c1 {
		font-size: 34rpx;
		color: rgba(255, 70, 32, 1);
	}
	
	.home_fd3_0_c1_c0_c2_c0_c1 {
		color: #ff5536;
		font-weight: 600;
	}
	
	.home_fd3_0_c1_c0_c2_c0_c0 {
		font-size: 22rpx;
		color: rgba(255, 70, 32, 1);
		font-weight: 700;
	}
	
	.home_fd3_0_c1_c0_c2 {
		width: 100%;
		margin: 20rpx 0rpx 0rpx 0rpx;
	}
	
	.home_fd3_0_c1_c0_c1_c0 {
		color: rgba(167, 166, 167, 1);
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	
	.home_fd3_0_c1_c0_c0 {
		font-size: 32rpx;
		font-weight: 700;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: rgba(16, 16, 16, 1);
	}
	
	.home_fd3_0_c0_c0 {
		width: 260rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}
	
	.home_fd3_0_c0 {
		margin: 0rpx 24rpx 0rpx 0rpx;
	}
	
	.home_fd3_0 {
		background: var(--benbenbgColor1);
		width: 100%;
		margin: 20rpx 0rpx 20rpx 0rpx;
		background-size: 100% auto;
	}
</style>